<template>
  <div>
    <div class="item_title">近7日智能控电次数（单位:次）</div>
    <div ref="serverPowerControl" style="width: 100%; height: 260px" />
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
import echarts from "echarts";
export default {
  data() {
    return {
      intelligencedata: [
        {
          value: "10",
          time: "2020-02-01",
        },
        {
          value: "52",
          time: "2020-02-02",
        },
        {
          value: "200",
          time: "2020-02-03",
        },
        {
          value: "334",
          time: "2020-02-04",
        },
        {
          value: "390",
          time: "2020-02-05",
        },
        {
          value: "330",
          time: "2020-02-06",
        },
        {
          value: "220",
          time: "2020-02-07",
        },
      ],
    };
  },
  mounted() {
    this.getDevControlNum();
  },
  methods: {
    getDevControlNum() {
      ajax.get({
        url: this.$API.getDevControlNum,
        data: {},
        success: (response) => {
          let self = this;
          self.intelligencedata = response.data;
          this.getServerPowerControlCharts()
        },
      });
    },
    getServerPowerControlCharts() {
      let xAxis_data = [];
      let series_data = [];
      for (let item of this.intelligencedata) {
        xAxis_data.push(item.time.slice(5, 10));
        series_data.push(item.value);
      }

      const chart = this.$refs.serverPowerControl;
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          color: ["#4F7EDD", "#01D3DE"],
          grid: {
            left: "16",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          tooltip: {
            trigger: "axis",
            show: true,
            axisPointer: {
              type: "none",
            },
          },
          legend: {
            data: ["控电次数"],
            textStyle: {
              color: "#fff",
            },
            right: "16",
            top: "5",
          },
          xAxis: {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(220, 220, 220, 0.2)",
              },
            },

            data: xAxis_data,
          },
          yAxis: {
            show: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(220, 220, 220)",
              },
            },
          },
          series: [
            {
              name: "控电次数",
              type: "bar",
              seriesLayoutBy: "row",
              barWidth: "25",
              label: {
                show: true,
                position: "top",
              },
              data: series_data,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.item_title {
  height: 50px;
  padding: 15px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #488fff47;
}
</style>